<template>
	<view class="container">
		<view class="topic-wrap u-p-30">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<!--话题分类-->
				<view class="u-m-b-60">
					<u-form-item label="话题分类" label-width="auto" prop="catename">
						<u-input input-align="right" v-model="model.catename" @click="show = true" placeholder="请选择"
							type="select" />
					</u-form-item>
				</view>
		
				<u-form-item :border-bottom="false" prop="text">
					<textarea placeholder="一句话介绍要讨论的话题" v-model="model.text" class="post-txt"></textarea>
				</u-form-item>
			
				<u-upload :showProgress="false" @on-uploaded="uploadSuccess" @on-remove="uploadRemove"
					:action="`${$API_URL}index/upload`" width="140" height="140" maxCount="9">
				</u-upload>
				<!--选择定位-->
				<view @click="chooseLocation" class="choose-item">
					<u-icon class="icon" name="map" color="#999" size="40"></u-icon>
					<text class="txt">{{model.address || "所在位置"}}</text>
					<u-icon class="u-icon" name="arrow-right"></u-icon>
				</view>
			</u-form>
		</view>
		<!-- 分类选择器 -->
		<u-select v-model="show" value-name='id' label-name='name' mode="single-column" :list="cateList"
			@confirm="confirm"></u-select>
		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
		<!--提交按钮-->
		<view class="f-fixed u-padding-20">
			<u-button @click="addTopicadd" shape="circle" type="primary">发布</u-button>
		</view>
	</view>
</template>

<script>
	import Auth from '@/shopro/permission/index.js';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				cateList: [],
				show: false,
				model: {
					catename: '',
					text: '',
					category_ids: '',
					name: '',
					address: '', //门店地址
					latitude: '', //纬度
					longitude: '', //京都
				},
				images:[],
				errorType: ['message'],
				rules: {
					catename: [{
						required: true,
						message: '请输选择话题分类',
						trigger: ['change', 'blur']
					}],
					text: [{
						required: true,
						message: '请输入话题内容',
						trigger: ['change', 'blur']
					}],
				}

			}
		},
		onLoad() {
			this.getCate();
			let location = uni.getStorageSync("location_info");
			this.longitude = location.longitude;
			this.latitude = location.latitude;
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			//话题分类
			getCate() {
				let that = this;
				that.$http('topic.topicate').then(res => {
					if (res.code === 1) {
						that.cateList = res.data.list;
					}
				});
			},
			// 上传图片成功
			uploadSuccess(e) {
				this.images = [];
				e.forEach(item => {
					this.images.push(item.response.data.url);
				});
			},

			// 移除图片
			uploadRemove(index) {
				this.images.splice(index, 1);
			},
			addTopicadd() {
				console.log('验证开始', this.form);
				//校验
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过', this.form);
						let formData = {
							id: this.id,
							category_ids: this.model.category_ids, //分类id
							text: this.model.text, //文本内容
							images: this.images, //图片
							address: this.model.address, //地理位置
							latitude: this.model.latitude, //经度
							longitude: this.model.longitude //维度
						};
						this.$http('topic.topicadd', formData, '提交中...').then(res => {
							uni.hideKeyboard();
							if (res.code === 1) {
								this.$u.toast('提交成功');
								this.$Router.back();
							}
						});
					} else {
						console.log('验证失败', this.form);
					}
				});
			},
			//分类选择确定按钮
			confirm(e) {
				this.model.category_ids = e[0].value;
				this.model.catename = e[0].label;
			},
			//选择定位
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.model.address = res.name;
						that.model.latitude = res.latitude;
						that.model.longitude = res.longitude;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.area-box {
		width: 690rpx;
		min-height: 306rpx;
		background: rgba(249, 250, 251, 1);
		border-radius: 20rpx;
		padding: 20rpx;

		.pl-style {
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(177, 179, 199, 1);
			line-height: 50rpx;
		}

		.inp-area {
			font-size: 26rpx;
			font-weight: 500;
			color: #333;
			line-height: 50rpx;
			width: 100%;
		}

		.img-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20rpx;

		}
	}

	.post-txt {
		width: 100%;
		padding: 20rpx 0;
		min-height: 300rpx;

	}

	.choose-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #F5F5F5;

		&:last-child {
			border: 0;
		}

		.txt {
			margin-left: 20rpx;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
		}

		.u-icon {
			margin-left: auto;
			color: #999;
		}
	}
</style>
